<template>
  <div>
    <el-table :data="tableData" stripe :header-cell-style="{backgroundColor: 'aliceblue', color: '#666'}"
              style="margin-top: 10px">
      <el-table-column prop="id" label="序号" width="50" align="center"></el-table-column>
      <el-table-column prop="username" label="账号" align="center"></el-table-column>
      <el-table-column prop="name" label="用户名" align="center"></el-table-column>
      <el-table-column prop="phone" label="电话" align="center"></el-table-column>
      <el-table-column prop="address" label="地址" align="center"></el-table-column>
      <el-table-column label="操作" align="center" width="180">
        <template v-slot="scope">
          <el-button size="mini" :type="scope.row.status === 1 ? 'info' : 'primary'" plain @click="addGroup(scope.row)">
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 10px 0">
      <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :hide-on-single-page="hideValue"
          :total="total">
      </el-pagination>
    </div>

    <el-dialog title="设置评估组" :visible.sync="addGroupVisible">
      <el-form ref="addGroupTable">
        <el-form-item>
          <el-form-item label="当前已添加：" style="margin-left: 20px">
            <div>
              <el-tag
                  :key="tag.id"
                  v-for="tag in groupData"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(tag)" style="margin-right: 5px">
                {{ tag.groupName }}
              </el-tag>
            </div>
          </el-form-item>

          <el-form-item label="选择评估组" style="margin-left: 20px">
            <el-select v-model="value" placeholder="请选择">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addGroupVisible = false">取 消</el-button>
        <el-button type="primary" @click="setGroup">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/urils/request";

export default {
  name: "SetGroup",
  data() {
    return {
      tableData: [],
      hideValue: false,
      total: 0,
      pageNum: 1,
      pageSize: 6,
      schoolGroup: {
        userId: '',
        userName: '',
        groupId: '',
        groupName: '',
      },
      addGroupVisible: false,
      groups: [],
      options: [],
      value: '',
      user: {},
      groupData: [],   //已经添加的评估组
      groupDataId: []
    }
  },
  methods: {
    updateUser() {
      request.post('/user/update', this.user).then(res => {
        if (res.code === '200') {
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    handleCurrentChange(pageNum) {
      this.load(pageNum)
    },
    load(pageNum) {  // 分页查询
      if (pageNum) this.pageNum = pageNum
      let identity = JSON.parse(localStorage.getItem('user')).identity
      if (identity === '1') {
        identity = '3'
      } else if (identity === '2') {
        identity = '4'
      } else {
        return false
      }
      request.get('/schoolGroup/selectPage', {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          identity: identity
        }
      }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
        // console.log(this.tableData)
      })
    },
    addGroup(user) {
      this.addGroupVisible = true
      //获取已经添加的评估组
      this.getGroup(user)
      this.options = []
      request.get('/experts/list').then(res => {
        if (res.code === '200') {
          this.groups = res.data
          for (let i = 0; i < res.data.length; i++) {
            if (!this.groupDataId.includes(res.data[i].id)) {
              this.options.push({
                value: res.data[i].id,
                label: res.data[i].name
              })
            }
          }
        } else {
          this.$message.error(res.msg)
        }
      })
      this.schoolGroup.userId = user.id
      this.schoolGroup.userName = user.name
      this.user = user
    },
    setGroup() {
      if (this.value === '') {
        this.addGroupVisible = false
        return false
      }
      this.schoolGroup.groupId = this.value
      this.schoolGroup.groupName = this.getGroupName(this.value)
      var flag = false
      request.post('/schoolGroup/add', this.schoolGroup).then(res => {
        if (res.code === '200') {

        } else {
          this.$message.error(res.msg)
        }
      })
      this.user.status = 1
      this.updateUser()
      this.$message.success("添加成功")
      this.addGroupVisible = false
      location.reload()
    },
    getGroupName(id) {
      for (let i = 0; i < this.groups.length; i++) {
        if (this.groups[i].id === id) return this.groups[i].name
      }
    },
    handleClose(tag) {
      request.post('/schoolGroup/del', tag).then(res => {
        if (res.code === '200') {
          this.$message.success('删除成功')
          this.addGroup(this.user)
        } else {
          this.$message.error(res.msg)
        }
      })
      this.groupData.splice(this.groupData.indexOf(tag), 1)
    },
    getGroup(user) {
      this.groupDataId = []
      request.post('/schoolGroup/getBySchool', user).then(res => {
        if (res.code === '200') {
          this.groupData = res.data
          for (let a in this.groupData) {
            this.groupDataId.push(this.groupData[a].groupId)
          }
        } else {
          this.$message.error(res.msg)
        }
      })
    }

  },
  created() {
    this.load()
    if (this.total === 0) {
      this.hideValue = true
    }
  },
  watch: {
    addGroupVisible: function (newVal, oldVal) {
      if(!newVal){
        request.post('/schoolGroup/getBySchool', this.user).then(res => {
          if(res.code === '200'){
            let datas = res.data
            if(datas.length === 0){
              this.user.status = 0
              this.updateUser()
            }
          }
        })
      }
    }
  }
}
</script>

<style scoped>

</style>